<include file="/public/header" />

<div class="layui-fluid">
    <div class="layui-card">
        <!-- // 默认操作按钮 -->
        <div class="layui-card-header layadmin-card-header-auto ">
        <div class="layui-form">
            <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input name="title" class="layui-input" type="text" placeholder="{:__('角色名称')}"/>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input name="alias" class="layui-input" type="text" placeholder="{:__('角色标识')}"/>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input name="content" class="layui-input" type="text" placeholder="{:__('备注查询')}"/>
                </div>
            </div>
            <div class="layui-inline" >
                <!-- // 默认搜索 -->
                <button class="layui-btn icon-btn" lay-filter="formSearch" lay-submit><i class="layui-icon layui-icon-search"></i>{:__('搜索')}</button>
                <!-- // 打开添加页面 -->
                <button class="layui-btn icon-btn" lay-open="" data-title="{:__('添加角色')}" data-area="600px" data-url="#editforms" >
                    <i class="layui-icon layui-icon-add-1"></i>{:__('添加')}
                </button>
            </div>
            </div>
        </div>   
        </div>

        <!-- // 创建数据表实例 -->
        <table id="lay-tableList" lay-filter="lay-tableList"></table>        
    </div>
</div>

<!-- // 添加编辑栏目 -->
<script type="text/html" id="editforms" >
<div class="layui-fluid layui-bg-white" >
    <form class="layui-form layui-form-fixed" lay-filter="editforms" >
    <input type="text" name="id" hidden="">
    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">* </font>{:__('父级角色')}</label>
        <div class="layui-input-block">
            <select name="pid"  lay-verify="required" > <volist name="$group" id="vo" >
                <option value="{$vo.id}">{$vo.title}</option>
                </volist>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">* </font>{:__('角色名称')}</label>
        <div class="layui-input-block">
            <input name="title" placeholder="{:__('请角色名称')}" type="text" class="layui-input" lay-verify="required" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">{:__('角色标识')}</label>
        <div class="layui-input-block">
            <input name="alias" placeholder="{:__('请角色标识')}" type="text" class="layui-input"  lay-verify="required" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">{:__('角色备注')}</label>
        <div class="layui-input-block">
            <textarea name="content" id="content" cols="30" rows="10" style="min-height: 110px;" placeholder="{:__('请输入角色备注')}" class="layui-textarea" 
            lay-verify="required"></textarea>
        </div>
    </div>

    <div class="layui-footer layui-form-item layui-center"  >
        <button class="layui-btn layui-btn-primary" type="button" sa-event="closePageDialog" >{:__('取消')}</button>
        <button class="layui-btn" lay-filter="submitPage"  lay-submit>{:__('提交')}</button>
    </div>
    </form>
</div>
</script>

<!-- // 编辑权限列表 -->
<script type="text/html" id="authForms">
<div class="layui-fluid layui-bg-white" >
    <form action="{:url('/system/AdminGroup/editRules')}" class="layui-form">
    <div class="layui-authtree"  style="padding-left: 15px"><div id="authTree"></div></div>
    <div class="layui-footer layui-form-item layui-center "  >
        <button class="layui-btn layui-btn-primary" type="button" sa-event="closePageDialog" >{:__('取消')}</button>
        <button class="layui-btn" lay-filter="submitPage" lay-submit>{:__('提交')}</button>
    </div>
    </form>
</div>
</script>

<!-- // 栏目权限列表 -->
<script type="text/html" id="cateForms">
<div class="layui-fluid layui-bg-white" >
    <form action="{:url('/system/AdminGroup/editCates')}" class="layui-form">
    <div class="layui-authtree" style="padding-left: 15px"><div id="cateTree"></div></div>
    <div class="layui-footer layui-form-item layui-center "  >
        <button class="layui-btn layui-btn-primary" type="button" sa-event="closePageDialog" >{:__('取消')}</button>
        <button class="layui-btn" lay-filter="submitPage" lay-submit>{:__('提交')}</button>
    </div>
    </form>
</div>
</script>

<!-- // 列表工具栏 -->
<script type="text/html" id="tableBar">
    <a class="layui-table-text" data-title="{:__('编辑')} {{d.title}}" data-area="500px" data-url="#editforms"  lay-event="edit" >{:__('编辑')}</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" callback="auth" data-area="300px" data-title="{:__('访问权限')}" data-url="#authForms" lay-event="auth">{:__('权限')}</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" callback="cate" data-area="300px" data-title="{:__('栏目权限')}" data-url="#cateForms" lay-event="cate" >{:__('栏目')}</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" data-url="{:url('/system/AdminGroup/del')}?id={{d.id}}" lay-event="del" >{:__('删除')}</a>
</script>

<include file="/public/footer" />
<include file="/public/static" />
<script>
    layui.use(['admin','layer','table','tree','form'], function () {
        var jquery = layui.jquery;
        var admin = layui.admin;
        var tree = layui.tree;
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;

        /*
         * 初始化表格
        */
        var isTable = table.render({
            elem: "#lay-tableList"
            ,url: "{:url('/system/AdminGroup/index')}"
            ,page: true
            ,cols: [[
                {type: 'checkbox', width:50},
                {field: 'id', align: 'center',sort: true,width: 80,  title: 'ID'},
                {field: 'title', align: 'center', title: "{:__('名称')}"},
                {field: 'alias', align: 'center', title: "{:__('角色标识')}"},
                {field: 'content', align: 'center',title: "{:__('角色备注')}"},
                {field: 'create_time', align: 'center',title: "{:__('创建时间')}"},
                {align: 'center', toolbar: '#tableBar',width: 260, title: "{:__('操作')}"},
            ]]
        })

        /*
         * 角色回调函数
         */
        admin.callback.auth = function(clickthis,colletction,config) {

            // 获取表格对象
            var tableThis = colletction.tableThis, checkKeys = [];

            // 勾选默认权限
            if (typeof (tableThis.data.rules) !== undefined && tableThis.data.rules != null) {
                checkKeys = tableThis.data.rules.split(',');
                for(var i in checkKeys) {
                    checkKeys[i] = parseInt(checkKeys[i]);
                }
            }

            jquery.ajax({
                url:'{:url("/system/Admin/getPermissions")}',
                type:'post',
                dataType:'json',
                data:{
                    type : 'rules',
                    group: true,
                },
                success(data) {
                    // 渲染树列表
                    tree.render({
                        id: 'authTree'
                        ,elem: '#authTree'
                        ,checkids: checkKeys
                        ,data: data
                        ,showCheckbox: true
                        ,oncheck: function(obj){}
                    });

                    // 监听提交
                    form.on("submit(submitPage)",function(post){
                        // 获取提交地址
                        var pageThat = jquery(this), _form = pageThat.parents('form'),
                            _pageUrl = _form.attr("action") || pageThat.data('url');
                        pageThat.attr("disabled",true);
                        if (typeof(_pageUrl) === 'undefined') {
                            layer.msg('缺少URL属性','error');
                            return false;
                        }

                        // 增加角色id
                        post.field.id = tableThis.data.id;
                        // 增加节点数据
                        post.field.rules = tree.getChecked('authTree',true);

                        // 开始POST提交数据
                        jquery.post(_pageUrl,
                            post.field, function(res){
                                if (res.code === 200) {
                                    layer.msg(res.msg);
                                    // 更新本地规则
                                    tableThis.update({
                                        rules: tree.getChecked('authTree',true).join(',')
                                    });
                                    // 关闭当前窗口
                                    layer.close(colletction.index);
                                }else{
                                    layer.error(res.msg);
                                }
                            }, 'json');

                        return false;
                    })
                }
            })
        }

        /**
         * 栏目权限回调函数
        */
        admin.callback.cate = function(clickthis,colletction,config) {

            // 获取表格对象
            var tableThis = colletction.tableThis,checkKeys = [];
            // 勾选默认权限
            if (typeof (tableThis.data.cates) !== undefined && tableThis.data.cates != null) {
                checkKeys = tableThis.data.cates.split(',');
                for(var i in checkKeys) {
                    checkKeys[i] = parseInt(checkKeys[i]);
                }
            }

            jquery.ajax({
                url:'{:url("/system/Admin/getPermissions")}',
                type:'post',
                dataType:'json',
                data:{
                    type : 'cates',
                    group: true,
                },
                success(data) {

                    // 渲染树列表
                    tree.render({
                        id: 'cateTree'
                        ,elem: '#cateTree'
                        ,checkids: checkKeys
                        ,data: data
                        ,showCheckbox: true
                        ,oncheck: function(obj){}
                    });

                    // 监听提交
                    form.on("submit(submitPage)",function(post){
                        // 获取提交地址
                        var pageThat = jquery(this), _form = pageThat.parents('form'),
                            _pageUrl = _form.attr("action") || pageThat.data('url');
                        pageThat.attr("disabled",true);
                        if (typeof(_pageUrl) === 'undefined') {
                            layer.msg('缺少URL属性','error');
                            return false;
                        }

                        // 增加角色id
                        post.field.id = tableThis.data.id;
                        // 增加节点数据
                        post.field.cates = tree.getChecked('cateTree',true);

                        // 开始POST提交数据
                        jquery.post(_pageUrl,
                            post.field, function(res){
                                if (res.code === 200) {
                                    layer.msg(res.msg);
                                    // 更新栏目权限
                                    tableThis.update({
                                        cates: tree.getChecked('cateTree',true).join(',')
                                    });
                                    // 关闭当前窗口
                                    layer.close(colletction.index);
                                }else{
                                    layer.error(res.msg);
                                }
                            }, 'json');

                        return false;
                    })
                }
            })

        }
		    
	});

</script>
